<template>
  <div class="max-w-5xl mx-auto px-4 pt-8">
    <div
      class="relative bg-gradient-to-r from-[#8B4513] via-[#D2691E] to-[#CD853F] text-white overflow-hidden mb-8"
    >
      <!-- 背景装饰 -->
      <div class="absolute inset-0 opacity-10">
        <div
          class="absolute top-0 left-0 w-32 h-32 bg-white rounded-full -translate-x-16 -translate-y-16"
        ></div>
        <div
          class="absolute bottom-0 right-0 w-24 h-24 bg-white rounded-full translate-x-12 translate-y-12"
        ></div>
        <div
          class="absolute top-1/2 left-1/4 w-16 h-16 bg-white rounded-full transform -translate-y-1/2"
        ></div>
      </div>

      <!-- 主要内容 -->
      <div class="relative z-10 px-8 py-6">
        <!-- 标题和统计数据水平排列 -->
        <div class="flex flex-col lg:flex-row items-center justify-between gap-6">
          <!-- 左侧标题 -->
          <div class="text-center lg:text-left">
            <h1 class="text-2xl font-bold font-kai mb-2 text-shadow-lg">{{ title }}</h1>
            <p class="text-lg opacity-90">{{ subtitle }}</p>
          </div>

          <!-- 右侧统计数据 -->
          <div class="flex items-center gap-8">
            <div class="text-center">
              <div class="text-3xl font-bold text-[#D4AF37]">{{ totalWorks }}</div>
              <div class="text-sm opacity-90">参赛作品</div>
            </div>
            <div class="w-px h-12 bg-white/30"></div>
            <div class="text-center">
              <div class="text-3xl font-bold text-[#D4AF37]">{{ awardWorks }}</div>
              <div class="text-sm opacity-90">获奖佳作</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    default: '韶华墨韵书画艺术大赛'
  },
  subtitle: {
    type: String,
    default: '传承千年文化，展现时代风采'
  },
  totalWorks: {
    type: Number,
    default: 355
  },
  awardWorks: {
    type: Number,
    default: 99
  }
});
</script>

<style scoped>
/* 组件样式 */
</style>